<template>
	<view class="register">
		<view class="register-box">
			<u--form labelPosition="left" :labelStyle="{color:'#666',fontSize:'18rpx'}"  :rules="rules" :model="form"
				ref="uForm">
				<u-form-item required prop="realName" label="姓名" labelWidth="90" borderBottom>
					<u--input border="none" v-model="form.realName" placeholder="请输入患儿姓名"></u--input>
				</u-form-item>
				<u-form-item required label="性别" labelWidth="90" borderBottom prop="sex">
					<u-radio-group v-model="form.sex" @change="changeSex" placement="row" disabled>
						<u-radio activeColor="#54b6ab" labelSize="18rpx" :name="1" label="男"></u-radio>
						<u-radio activeColor="#54b6ab" labelSize="18rpx" style="margin-left: 20rpx;" :name="0"
							label="女"></u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item required label="身份证号" labelWidth="90" borderBottom prop="idCard">
					<u--input border="none" type="idcard" v-model="form.idCard" placeholder="请输入身份证号"></u--input>
				</u-form-item>

				<u-form-item required label="体重" labelWidth="90" borderBottom prop="weightNum">
					<u-input border="none" v-model="form.weightNum" placeholder="请输入体重">
						<template slot="suffix">
							<text style="font-size: 18rpx;color: rgb(192, 196, 204);">公斤</text>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item required label="身高" labelWidth="90" borderBottom prop="heightNum">
					<u-input border="none" type="digit" v-model="form.heightNum" placeholder="请输入身高">
						<template slot="suffix">
							<text style="font-size: 18rpx;color: rgb(192, 196, 204);">厘米</text>
						</template>
					</u-input>
				</u-form-item>

				<u-form-item required prop="age" label="年龄" labelWidth="90" borderBottom>
					<u--input border="none" type="number" disabled v-model="form.age" placeholder="请输入患儿年龄"></u--input>
				</u-form-item>

				<u-form-item required label="出生年月日" labelWidth="90" borderBottom prop="brithDay">
					<uni-datetime-picker type="date" :value="form.brithDay" start="1990-01-01" end="2990-01-01"
						disabled @change="change" />
				</u-form-item>

				<u-form-item label="家长手机号" required labelWidth="90" borderBottom prop="parentMobile">
					<u--input border="none" v-model="form.parentMobile" placeholder="请输入家长手机号"></u--input>
				</u-form-item>
				<u-form-item label="住址" labelWidth="90" borderBottom prop="address">
					<u--input border="none" v-model="form.address" placeholder="请输入住址"></u--input>
				</u-form-item>
				<u-form-item label="就诊人关系" required labelWidth="90" borderBottom prop="relation">
					<u--input border="none" v-model="form.relation" placeholder="请输入就诊人关系"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="footer-btn">
			<u-button text="确 定" @click="submitData" shape="circle" class="custom-style"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		IdCard
	} from '../common/utils.js'
	export default {
		data() {
			return {
				form: {
					realName: null,
					sex: null,
					weightNum: null,
					age: null,
					heightNum: null,
					weightNum: null,
					brithDay: null,
					idCard: null,
					parentMobile: null,
					address: null,
					relation: null
				},
				rules: {
					realName: [{
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur']
					}],
					sex: [{
						type: 'number',
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur']
					}],
					age: [{
						type: 'number',
						required: true,
						message: '请输入正确年龄',
						trigger: ['change', 'blur']
					}],
					weightNum: [{
						type: 'float',
						required: true,
						message: '请输入正确体重',
						trigger: ['change', 'blur']
					}],
					heightNum: [{
						type: 'float',
						required: true,
						message: '请输入正确身高',
						trigger: ['change', 'blur']
					}],
					idCard: [{
							required: true,
							message: '请输入身份证',
							trigger: ['change', 'blur']
						},

						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								if (value) {
									return uni.$u.test.idCard(value)
								}
							},
							message: '请输入有效身份证',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					brithDay: [{
						type: 'date',
						required: true,
						message: '请选择出生日期',
						trigger: ['change', 'blur']
					}],
					relation: [{
						type: 'string',
						required: true,
						message: '请输入就诊人关系',
						trigger: ['change', 'blur']
					}],
					parentMobile: [{
							required: true,
							message: '请输入家长手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		watch: {
			// 此处监听obj属性a值变量
			'form.idCard'(item1, item2) {
				// item1为新值，item2为旧值
				if (item1 && (item1.length === 15 || item1.length === 18)) {
					this.form.age = IdCard(item1, 3)
					this.form.sex = IdCard(item1, 2) === '男' ? 1 : 0
					this.form.brithDay = IdCard(item1, 1)
				}
			},
			deep: true
		},
		methods: {
			//选择出生年月日
			change(e) {
				this.form.brithDay = e;
			},
			//选择性别
			changeSex(e) {
				console.log(e);
			},
			submitData() {
				this.$refs.uForm.validate().then(resp => {
					uni.$http.post('/patient-client/addClient', this.form).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my'
								})
							}, 500)
						}
					})

				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
					// uni.$u.toast('校验失败')
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		padding: 20rpx;
		box-sizing: border-box;

		.register-box {
			width: 100%;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			/deep/.u-input__content__field-wrapper__field {
				font-size: 18rpx !important;
			}
		}

		.footer-btn {
			width: 100%;
			margin-top: 50rpx;

			.custom-style {
				background-color: #ffb049;
				color: #fff;
			}
		}
	}
</style>